<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset=utf-8>
    <meta name=viewport content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name=format-detection content="telephone=no">
    <title>云医疗商城</title>
</head>
<style>
    #app_header {
        width: 100%;
        padding: 0 8px;
        height: 50px;
        box-sizing: border-box;
        background: none;
        color: #000;
        position: relative;
        top: 0;
    }
    

    #app_header_title {
        margin: 0 auto;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        overflow: hidden;
        max-width: 180px;
        text-overflow: ellipsis;
        white-space: nowrap;
        letter-spacing: 1px;
        transition: color linear 0.4s;
    }

    #app_ui {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 6px 12px;
        background-color: rgba(255, 255, 255, 0.85);
        border-radius: 24px;
        border: 1px solid #eee;
        font-size: 0px;
    }

    #app_more_hander {
        margin-right: 8px
    }

    #app_close_hander {
        margin-left: 8px
    }

    #app_more_hander,
    #app_close_hander {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        border-radius: 14px;
    }

    #app_close_hander::after,
    #app_close_hander::before,
    #app_more_hander::after,
    #app_more_hander::before,
    #app_more_hander>div {
        left: 50%;
        top: 50%;
        position: absolute;
        content: '';
        border-radius: 50%;
    }

    #app_more_hander>div,
    #app_more_hander::after,
    #app_more_hander::before {
        margin-left: -3px;
        margin-top: -3px;
        width: 6px;
        height: 6px;
        background-color: #333;
        transform-origin: center center;
    }

    #app_more_hander::after {
        margin-top: -2px;
        margin-left: -9px;
        width: 4px;
        height: 4px;
    }

    #app_more_hander::before {
        margin-top: -2px;
        margin-left: 5px;
        width: 4px;
        height: 4px;
    }

    #app_close_hander::after {
        margin-left: -3px;
        margin-top: -3px;
        width: 6px;
        height: 6px;
        background-color: #333
    }

    #app_close_hander::before {
        margin-left: -9px;
        margin-top: -9px;
        width: 14px;
        height: 14px;
        border: 2px solid #333
    }

    #app_header.light {
        background-color: #333;
        color: #FFF
    }

    #app_header.dark {
        background-color: #FFF;
        color: #222;
    }

    #app_header.dark.shadow {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04)
    }

    #app_header.light #app_ui_back>div {
        background-color: #FFF;
    }

    #app_header.dark #app_ui {
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.1)
    }

    #app_header.light #app_ui {
        background-color: rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 2px rgba(255, 255, 255, 0.6)
    }

    #app_header.light #app_ui #app_more_hander>div,
    #app_header.light #app_ui #app_more_hander::after,
    #app_header.light #app_ui #app_more_hander::before {
        background-color: #FFF
    }
</style>

<body>
    <div>
        <div id="app_header">
            <div id="app_header_statusBar"></div>
            <div id="app_header_title">云医疗商城</div>
            <div id="app_ui">
                <div id="app_more_hander">
                    <div></div>
                </div>
                <div id="app_close_hander"></div>
            </div>
        </div>
    </div>
</body>
<script>
    apiready = function () {
        document.getElementById('app_header').style.marginTop = api.safeArea.top + 'px'
        var pageParam = {
            name :api.pageParam.name,
            url: api.pageParam.params.url
        }

        document.getElementById('app_close_hander').addEventListener('click', function () {
            // 关闭当前商城
            api.confirm({
                title: '提示',
                msg: '该操作将关闭云医疗商城!',
                buttons: ['确定', '取消']
            }, function(ret, err) {
                var index = ret.buttonIndex;
                if(index == 1){
                    api.closeFrame({
                        name: 'yylShop'
                    })
                    api.sendEvent({
                        name: 'closeMiniNewShop',
                        extra: {
                            name: api.pageParam.name
                        }
                    })
                }
            });
        })

        console.log(111)
        // 监听关闭商城
        api.addEventListener({name: 'shopClose'}, function(ret){
            
            api.closeFrame({
                name: 'yylShop'
            })
            api.sendEvent({
                name: 'closeMiniNewShop',
                extra: {
                    name: api.pageParam.name
                }
            })
        })
        console.log(JSON.stringify(api.pageParam.params))
        api.openFrame({
            name: 'yylShop',
            url: pageParam.url + '?name=' + pageParam.name ,
            rect: {
                x: 0,
                y: api.safeArea.top + 50,
                w: api.winWidth,
                h: 'auto'
            },
            pageParam: api.pageParam.params,            
            softInputBarEnabled: false,
            useWKWebView: true,
            softInputDismissMode: ['tap', 'interactive'],
            historyGestureEnabled: false,
            syncCookie: false,
            bounces: false,
            scrollToTop: false,
            scrollEnabled: true,
            vScrollBarEnabled: false,
            hScrollBarEnabled: false,
            scaleEnabled: false,
            allowEdit: false,
            bgColor: '#F7F8FA'
        })
    }
</script>

</html>